<template xmlns:slot="http://www.w3.org/1999/html">
  <div class="form-item">
    <div class="form-item-layout" :class="{block: !inline}">
      <div class="label">
        <span class="required" v-if="required">*</span>
        <slot name="label" v-if="!label"></slot>
        <label v-else>{{ label }}</label>{{ colon ? '：' : '' }}
      </div>
      <slot></slot>
      <div class="error" v-if="hasError">{{ errMsg }}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'DragFormItem',
    props: {
      label: {
        type: [String, Boolean],
        required: false
      },
      colon: {
        type: Boolean,
        default: true
      },
      inline: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      hasError () {
        return !!(this.errMsg.trim())
      }
    },
    data () {
      return {
        required: false,
        errMsg: ''
      }
    },
    mounted () {
      console.log(this)
    },
    updated () {
      console.log('update', this)
    }
  }
</script>

<style lang="less" scoped>
  .form-item {
    .form-item-layout {
      display: flex;
      padding: 5px 10px;
      &.block {
        flex-direction: column;
        justify-content: flex-start;
      }
      .label {
        .required {
          color: #DF4545
        }
      }
      .error {
        color: #DF4545;
      }
    }
  }
</style>
